import React, { Component } from 'react'
import { connect } from 'react-redux';
import { NavBar, Icon, Popover, Tabs } from 'antd-mobile'
const Item = Popover.Item;

class HomePage extends Component {
    constructor (props) {
        super(props);
        this.state = {
            visible: false
        }
    }

    getPage() {
        return this.props.tabs.length
    }
    render() {
        return (
            <div>
                <div style={{ position: 'fixed', height: '100px', width: '100%', top: 0, zIndex:1 }}>
                    <NavBar
                        mode="dark"
                        rightContent={[
                            <Icon  key ="r1" type="search" style={{ marginRight: '16px' }} />,
                            <Popover 
                            key ="r2"
                            mask
                            visible={this.state.visible}
                            overlayClassName="fortest"
                            overlay={[
                                (<Item key="1" value="sort"  data-seed="logId" >标签排序</Item>),
                                (<Item key="2" value="diy" style={{ whiteSpace: 'nowrap' }}>自定义标签</Item>),
                                (<Item key="3" value="remove">移除标签</Item>),
                                (<Item key="4" value="theme"  data-seed="logId">自定义主题</Item>),
                                (<Item key="6" value="about">
                                  <span style={{ marginRight: 5 }}>关于app</span>
                                </Item>),
                            ]}
                            align={{
                                overflow: { adjustY: 0, adjustX: 0 },
                                offset: [-10, 10],
                            }}
                            onSelect={
                                (obj)=> {
                                   this.props.history.push({ pathname : '/set' ,query : { key: obj.props.value, name: '标签排序'} })
                                }
                            }
                         >
                            <div style={{
                            height: '100%',
                            padding: '0 15px',
                            marginRight: '-15px',
                            display: 'flex',
                            alignItems: 'center',
                            }}
                            >
                                <Icon type="ellipsis" />
                            </div>
                        </Popover>,
                        ]}
                    >Read</NavBar>
                    <Tabs tabs={this.props.tabs}
                    initialPage={1}
                    tabBarBackgroundColor="#108ee9"
                    tabBarActiveTextColor="#fff"
                    tabBarInactiveTextColor="#fff"
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    renderTabBar={props => <Tabs.DefaultTabBar {...props} page={this.getPage()} />}>
                    >
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#f5f5f5', color: '#333' }}>
                            all
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#f5f5f5', color: '#333' }}>
                            vue
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#f5f5f5', color: '#333' }}>
                            webpack
                        </div>
                    </Tabs>
                </div>
            </div>
        )
    }
}

const mapState = (state) => {
    console.log('state', state.getIn(['type', 'typeList']).toJS())
    return ({
        tabs: state.getIn(['type', 'typeList']).toJS()
    })
}

const mapDispatch = (dispatch) => ({

});


export default connect(mapState, mapDispatch)(HomePage)